<template>
	<!-- 通话界面 -->
	<div align="center">
		<video id="remoteVideo" autoplay
			   style="background-color: white; margin-right: 2em; height: 40vh; width: 60vh">
		</video>
		<video id="localVideo" autoplay muted
			   style="background-color: white; height: 17vh; width: 30vh">
		</video>
	</div>
	
</template>

<script>
import {ref} from "vue";
//import {deviceId} from "../utils/websocket";
import {ElMessage, ElMessageBox} from "element-plus";
import FloatList from "../views/FloatList.vue";

export default {
	name: "Call",
	props: ['deviceId'],
	setup() {
		const hangup = () => {
		
		}
		return {
			hangup
		}
		// //固定生成自己的用户id
		// let userId = deviceId;
		//
		// let toUserId = ref('');
		// let localVideo = null;
		// let remoteVideo = null;
		//
		// //使用google公开stun服务器
		// const config = {iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]};
		//
		// let peerConnection = new webkitRTCPeerConnection(null);
		// let socket;
		// let localStream = ref();
		//
		// //连接服务器
		// startWebsocket();
		//
		// //连接到WebSocket服务器
		// function startWebsocket() {
		// 	//let webSocketUrl = 'wss://' + location.hostname + '/call/' + userId
		// 	//let webSocketUrl = 'wss://192.168.188.111/call/' + userId
		// 	socket = FloatList.setup().websocket;
		// 	//socket.onmessage = onmessage;
		// }
		//
		//
		// //开启本地的媒体设备并展示
		// async function startHandle() {
		// 	//获取本地音视频流
		// 	let constraints = {
		// 		video: true,
		// 		audio: {
		// 			// 设置回音消除
		// 			noiseSuppression: true,
		// 			// 设置降噪
		// 			echoCancellation: true,
		// 		}
		// 	}
		// 	await navigator.mediaDevices.getUserMedia(constraints)
		// 		//展示本地视频流
		// 		.then(getLocalMediaStream)
		// 		.catch((err) => {
		// 			ElMessage.error('无摄像头/麦克风设备或无访问权限！');
		// 		});
		// 	//创建点对点连接对象
		// 	createConnection();
		// }
		//
		// //获得流后将音视频流展示并保存到变量
		// function getLocalMediaStream(mediaStream) {
		// 	localVideo = document.getElementById('localVideo');
		// 	remoteVideo = document.getElementById('remoteVideo');
		// 	localVideo.srcObject = mediaStream;
		// 	localStream.value = mediaStream;
		// }
		//
		// //创建点对点连接对象
		// function createConnection() {
		// 	//peerConnection = new RTCPeerConnection(config);
		// 	//peerConnection = new RTCPeerConnection(null);
		// 	//peerConnection = new webkitRTCPeerConnection(null)
		// 	if (localStream.value) {
		// 		//视频轨道
		// 		const videoTracks = localStream.value.getVideoTracks();
		// 		//音频轨道
		// 		const audioTracks = localStream.value.getAudioTracks();
		// 		//判断视频轨道是否有值
		// 		if (videoTracks.length > 0) {
		// 			console.log('使用的设备为：', videoTracks[0].label);
		// 		}
		// 		//判断音频轨道是否有值
		// 		if (audioTracks.length > 0) {
		// 			console.log('使用的设备为：', audioTracks[0].label);
		// 		}
		// 		//本地视频流添加到远程连接
		// 		localStream.value.getTracks().forEach((track) => {
		// 			peerConnection.addTrack(track, localStream.value);
		// 		});
		// 		console.log('本地音视频流添加到对等连接成功！');
		// 	}
		// 	// 监听返回的 Candidate
		// 	peerConnection.addEventListener('icecandidate', handleConnection);
		// 	// 监听 ICE 状态变化
		// 	peerConnection.addEventListener('iceconnectionstatechange', handleConnectionChange);
		// 	//拿到流的时候调用
		// 	peerConnection.addEventListener('track', getRemoteMediaStream);
		// }
		//
		// //进行通信
		// function onmessage(e) {
		// 	const data = JSON.parse(e.data)
		// 	const message = data.message
		// 	toUserId.value = message.userId
		//
		// 	switch (data.type) {
		// 		case 'connect':
		// 			//需要手动确认接听
		// 			ElMessageBox.confirm(toUserId.value + "请求视频通话！", "提示", {
		// 				type: "warning",
		// 				confirmButtonText: '接通',
		// 				cancelButtonText: '挂断'
		// 			})
		// 				.then(() => {
		// 					//如果关闭状态则打开
		// 					if (!callVisible.value) {
		// 						callVisible.value = true;
		// 					}
		//
		// 					startHandle().then(() => {
		// 						socket.send(JSON.stringify({
		// 							'type': 'start',
		// 							'message': {
		// 								'userId': userId,
		// 								'toUserId': toUserId.value
		// 							}
		// 						}))
		// 					})
		// 				})
		// 				.catch(() => {
		// 					ElMessage.warning('已挂断！');
		// 				});
		// 			break;
		// 		case 'start':
		// 			//同意连接之后开始连接
		// 			startConnection()
		// 			break;
		// 		case 'offer':
		// 			peerConnection.setRemoteDescription(new RTCSessionDescription({
		// 				type: 'offer',
		// 				sdp: message.sdp
		// 			}))
		// 				.then(() => {
		// 					console.log('设置远程sdp信息成功！');
		// 				})
		// 				.catch((err) => {
		// 					console.error('设置远程sdp信息失败', err);
		// 				});
		//
		// 			peerConnection.createAnswer()
		// 				.then(function (answer) {
		// 					peerConnection.setLocalDescription(answer)
		// 						.then(() => {
		// 							console.log('设置本地answer成功!');
		// 						})
		// 						.catch((err) => {
		// 							console.error('设置本地answer失败：', err);
		// 						});
		// 					socket.send(JSON.stringify({
		// 						'type': 'answer',
		// 						'message': {
		// 							'userId': userId,
		// 							'toUserId': toUserId.value,
		// 							'sdp': answer.sdp
		// 						}
		// 					}))
		// 				}).catch(e => {
		// 				console.error(e)
		// 			});
		// 			break;
		// 		case 'answer':
		// 			peerConnection.setRemoteDescription(new RTCSessionDescription({
		// 				type: 'answer',
		// 				sdp: message.sdp
		// 			}))
		// 				.then(() => {
		// 					console.log('设置远程answer成功');
		// 				})
		// 				.catch((err) => {
		// 					console.error('设置远程answer失败：', err);
		// 				});
		// 			break;
		// 		case 'icecandidate':
		// 			// 创建 RTCIceCandidate 对象
		// 			let newIceCandidate = new RTCIceCandidate({
		// 				sdpMid: message.candidate.sdpMid,
		// 				sdpMLineIndex: message.candidate.sdpMLineIndex,
		// 				candidate: message.candidate.sdp
		// 			});
		// 			// 将本地获得的 Candidate 添加到远端的 RTCPeerConnection 对象中
		// 			peerConnection.addIceCandidate(newIceCandidate)
		// 				.then(() => {
		// 					console.log('本地IceCandidate添加成功');
		// 				})
		// 				.catch((error) => {
		// 					console.error('本地IceCandidate添加失败：', error);
		// 				});
		// 			break;
		// 		case 'hangup':
		// 			//告知服务器被挂断！！！
		// 			socket.send(JSON.stringify({
		// 				'type': 'hungUp',
		// 				'message': {
		// 					'userId': userId,
		// 					'toUserId': toUserId.value
		// 				}
		// 			}));
		//
		// 			//停止音视频流传输
		// 			localStream.value.getTracks().forEach((track) => {
		// 				track.stop();
		// 			});
		//
		// 			//关闭连接并设置为空
		// 			peerConnection.close();
		// 			peerConnection = new webkitRTCPeerConnection(null);
		// 		default:
		// 			break;
		// 	}
		// }
		//
		// //创建sdp准备建立连接
		// function startConnection() {
		// 	//发送offer
		// 	peerConnection.createOffer()
		// 		.then(description => {
		// 			// 将 offer 保存到本地
		// 			peerConnection.setLocalDescription(description)
		// 				.then(() => {
		// 					console.log('设置本地sdp信息成功！');
		// 					// 本地设置描述并将它发送给远端
		// 					socket.send(JSON.stringify({
		// 						'type': 'offer',
		// 						'message': {
		// 							'userId': userId,
		// 							'toUserId': toUserId.value,
		// 							'sdp': description.sdp
		// 						}
		// 					}))
		// 				}).catch((err) => {
		// 				console.error('设置本地sdp信息失败：', err)
		// 			});
		// 		})
		// 		.catch((err) => {
		// 			console.error('创建offer失败：', err);
		// 		});
		// }
		//
		// //挂断通话
		// function hangup() {
		// 	//向服务器发送挂断信号
		// 	socket.send(JSON.stringify({
		// 		'type': 'hangup',
		// 		'message': {
		// 			'userId': userId,
		// 			'toUserId': toUserId.value
		// 		}
		// 	}));
		// 	//停止音视频流传输
		// 	localStream.value.getTracks().forEach((track) => {
		// 		track.stop();
		// 	});
		// 	//关闭连接并设置为空
		// 	peerConnection.close();
		// 	peerConnection = new RTCPeerConnection(null);
		// }
		//
		// //端与端建立连接
		// function handleConnection(event) {
		// 	// 获取到触发 icecandidate 事件的 RTCPeerConnection 对象
		// 	// 获取到具体的Candidate
		// 	const peerConnection = event.target;
		// 	const icecandidate = event.candidate;
		//
		// 	if (icecandidate) {
		// 		socket.send(JSON.stringify({
		// 			'type': 'icecandidate',
		// 			'message': {
		// 				'userId': userId,
		// 				'toUserId': toUserId.value,
		// 				'candidate': {
		// 					sdp: event.candidate.candidate,
		// 					sdpMid: event.candidate.sdpMid,
		// 					sdpMLineIndex: event.candidate.sdpMLineIndex
		// 				}
		// 			}
		// 		}))
		// 	}
		// }
		//
		// //显示远端媒体流
		// function getRemoteMediaStream(event) {
		// 	if (event.streams[0]) {
		// 		remoteVideo.srcObject = event.streams[0];
		// 	}
		// 	//播放远端视频
		// 	//remoteVideo.play();
		// }
		//
		// //监听ice状态变化
		// function handleConnectionChange(event) {
		// 	const connection = event.target;
		// 	console.log('ICE当前状态：', connection.iceConnectionState);
		// 	if (connection.iceConnectionState === 'disconnected') {
		// 		//停止音视频流传输
		// 		localStream.value.getTracks().forEach((track) => {
		// 			track.stop();
		// 		});
		//
		// 		//关闭连接并设置为空
		// 		peerConnection.close();
		// 		peerConnection = new RTCPeerConnection(null);
		// 	}
		// }
		//
		//
		// return {
		// 	userId,
		// 	toUserId,
		// 	localVideo,
		// 	remoteVideo,
		//
		// 	hangup
		// }
	}
}
</script>

<style scoped>

</style>